<!--
 * @LastEditors: yuSeen
 * @LastEditTime: 2022-01-11 14:50:53
-->
<!--
 * @LastEditors: yuSeen
 * @LastEditTime: 2021-12-26 18:14:52
-->
<template>
    <tr v-for="(row, index) in tableData" :key="row.id" :class="{ 'zebra': index % 2 }">
        <td class="index">{{ index < 9 ? '0' + (index + 1) : index + 1 }}</td>
        <td class="edit flex-c">
            <svgIcon
                :name="index % 2 ? 'loved' : 'love'"
                size="20"
                :class="{ 'fill-theme': index % 2 }"
                hover
            ></svgIcon>
            <svgIcon name="download" size="16" hover class="ml-1"></svgIcon>
        </td>
        <!-- <td v-for="(col, index) in 2" :key="index">
            <slot :row="row">{{ getColValue(row, props.prop) }}</slot>
        </td> -->
        <td>
            <slot :row="row">{{ getColValue(row, props.prop) }}</slot>
        </td>
    </tr>
</template>

<script lang='ts' setup>
import { IAllObject } from '@/types/base';
import { inject, onMounted, ref, getCurrentInstance } from 'vue';
import { addColFun, IColumn } from './types';

const props = defineProps({
    prop: String,
    label: String,
    width: [String, Number]
})
const  ins  = getCurrentInstance()
console.log(4, ins?.parent?.exposed?.rrrrrrrrrrrrrrrrrr);

const addColumn = inject('addColumn') as addColFun
onMounted(() => {
    // addColumn(props)
})
const tableData = inject('tableData') as any

// 获某列的值
const getColValue = (row: IAllObject, prop: string | undefined) => {
    return prop ? row[prop] : null
}

// const style = computed(() => {
//     const { width } = props;
//     let s = `${width}`;
//     s = `${s.replace('px', '')}px`;
//     return {
//         width: s,
//     };
// })
</script>

<style scoped lang='scss'>
.table {
    @apply w-full bg-main-bg-color border-t border-main-border-color;
    tr {
        @apply w-full flex h-8 leading-8 text-13 text-sub-text-color transition-all duration-300;
    }
    th {
        @apply h-8 leading-8 font-normal whitespace-nowrap overflow-hidden overflow-ellipsis;
        color: $sub-text-color !important;
        font-size: 12px !important;
    }
    td {
        @apply text-common-text-color whitespace-nowrap overflow-hidden overflow-ellipsis;
        height: inherit;
    }
    .index {
        @apply text-sub-text-color text-11 text-center;
        flex: 1;
        max-width: 80px;
    }
    .edit {
        @apply text-sub-text-color text-11;
        flex: 1;
        max-width: 80px;
    }
    .title {
        color: $main-text-color;
        flex: 5;
        width: 120px;
    }
    .singer {
        color: $sub-text-color;
        flex: 2;
    }
    .album {
        color: $sub-text-color;
        flex: 3;
    }
    .time {
        color: $sub-text-color;
        flex: 1;
    }
    // 斑马纹
    .zebra {
        background-color: rgba($color: #666, $alpha: 0.05);
    }
}
</style>